<template>
	<el-container>
		<div class="accessDivClass">
			<el-aside width="22%">
				<el-card body-style="height: calc(100vh - 170px );">
					<el-button type="primary" @click="appendRoot()">添加根节点</el-button>
					<br /><br />
					<el-scrollbar class="layout-scrollbar" style="height: calc(100% - 58px)">
						<!-- <div class="dataFileDiv"> -->
						<el-tree
							:data="categoryData"
							highlight-current
							node-key="id"
							:current-node-key="treeId"
							:expand-on-click-node="false"
							default-expand-all
							@node-click="nodeClick"
							ref="treeRef"
						>
							<template #default="{ node, data }">
								<span class="dataFile-tree-node" :title="data.bqdjmc">
									<span>&nbsp;&nbsp;{{ formatName(data.bqdjmc) }}</span>
									<span>
										<a style="margin-left: 8px" @click="append(data)">
											<el-icon><CirclePlus /></el-icon>
										</a>
										<a style="margin-left: 8px" @click="edit(node, data)">
											<el-icon><Edit /></el-icon>
										</a>
										<a style="margin-left: 8px" @click="remove(node, data)">
											<el-icon><Delete /></el-icon>
										</a>
									</span>
								</span>
							</template>
						</el-tree>
						<!-- </div> -->
					</el-scrollbar>
				</el-card>
			</el-aside>
			<el-container>
				<el-header>
					<el-card body-style="height: calc(100vh - 170px );">
						<el-scrollbar class="layout-scrollbar">
							<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
								<el-form-item>
									<el-input v-model="state.queryForm.bqmc" placeholder="标签名称" clearable></el-input>
								</el-form-item>
								<el-form-item>
									<el-select v-model="state.queryForm.fxdj" placeholder="风险等级" clearable>
										<el-option value="1" label="无风险"></el-option>
										<el-option value="2" label="低风险"></el-option>
										<el-option value="3" label="中风险"></el-option>
										<el-option value="4" label="高风险"></el-option>
									</el-select>
								</el-form-item>
								<el-form-item>
									<el-select v-model="state.queryForm.bqdx" placeholder="标签对象" clearable>
										<el-option :value="'1'" :label="'患者'"></el-option>
										<el-option :value="'2'" :label="'医生'"></el-option>
										<el-option :value="'3'" :label="'机构'"></el-option>
										<el-option :value="'4'" :label="'科室'"></el-option>
										<el-option :value="'5'" :label="'事件'"></el-option>
									</el-select>
								</el-form-item>
								<el-form-item>
									<el-select v-model="state.queryForm.shbz" placeholder="标签状态" clearable>
										<el-option :value="'0'" :label="'待审核'"></el-option>
										<el-option :value="'1'" :label="'通过'"></el-option>
										<el-option :value="'2'" :label="'未通过'"></el-option>
										<el-option :value="'3'" :label="'被驳回'"></el-option>
										<el-option :value="'4'" :label="'停用'"></el-option>
									</el-select>
								</el-form-item>
								<el-form-item>
									<el-select v-model="state.queryForm.sflk" placeholder="是否落库" clearable filterable>
										<el-option :label="'是'" :value="'1'"> </el-option>
										<el-option :label="'否'" :value="'2'"> </el-option>
									</el-select>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" :icon="Search" @click="getDataList()">查询</el-button>
								</el-form-item>
								<el-form-item>
									<el-button :icon="Refresh" @click="refresh">重置</el-button>
								</el-form-item>
								<el-form-item>
									<el-button :icon="Plus" type="primary" @click="addOrUpdateHandle()">新增</el-button>
								</el-form-item>
							</el-form>
							<el-table v-loading="state.dataListLoading" :data="state.dataList" border style="width: 100%" max-height="calc(100vh - 340px )">
								<el-table-column show-overflow-tooltip prop="zhmc" label="标签名称" header-align="center" align="center"></el-table-column>

								<el-table-column prop="bqsx" label="标签属性" header-align="center" align="center"></el-table-column>
								<el-table-column prop="shbz" label="状态" width="150" header-align="center" align="center">
									<template #default="scope">
										<span v-if="Number(scope.row.shbz) == 0">
											<el-icon color="#0fc6c2"><InfoFilled /></el-icon>待审核
										</span>
										<span v-if="Number(scope.row.shbz) == 1">
											<el-icon color="#00b42a"><SuccessFilled /></el-icon>通过
										</span>
										<span v-if="Number(scope.row.shbz) == 2">
											<el-icon color="#f7ba1e"><WarningFilled /></el-icon>未通过
										</span>
										<span v-if="Number(scope.row.shbz) == 3">
											<el-icon color="#f53f3f"><CircleCloseFilled /></el-icon>被驳回
										</span>
										<span v-if="Number(scope.row.shbz) == 4">
											<el-icon color="#f7ba1e"><WarningFilled /></el-icon>停用
										</span>
									</template>
								</el-table-column>
								<el-table-column prop="bqdxbh" label="标签对象" header-align="center" align="center">
									<template #default="scope">
										<span v-if="Number(scope.row.bqdxbh) === 1">患者 </span>
										<span v-if="Number(scope.row.bqdxbh) === 2">医生 </span>
										<span v-if="Number(scope.row.bqdxbh) === 3">机构 </span>
										<span v-if="Number(scope.row.bqdxbh) === 4">科室 </span>
										<span v-if="Number(scope.row.bqdxbh) === 5">事件 </span>
									</template>
								</el-table-column>
								<el-table-column prop="bqsl" label="标签数量" header-align="center" align="center" />
								<el-table-column prop="fxdj" label="风险等级" header-align="center" align="center">
									<template #default="scope">
										<el-tag v-if="Number(scope.row.fxdj) === 1" :type="'success'" disable-transitions> 无风险 </el-tag>
										<el-tag
											v-if="Number(scope.row.fxdj) === 2"
											style="background-color: #ff7d001a; color: #fadc19; border-color: #ff7d0033"
											disable-transitions
										>
											低风险
										</el-tag>
										<el-tag
											v-if="Number(scope.row.fxdj) === 3"
											style="background-color: #ff7d001a; color: #ff7d00; border-color: #ff7d0033"
											disable-transitions
										>
											中风险
										</el-tag>
										<el-tag v-if="Number(scope.row.fxdj) === 4" :type="'danger'" disable-transitions> 高风险 </el-tag>
									</template>
								</el-table-column>

								<el-table-column label="操作" fixed="right" header-align="center" align="center" width="180">
									<template #default="scope">
										<div style="display: flex; justify-content: center">
											<el-button type="primary" link @click="addOrUpdateHandle(scope.row)">编辑</el-button>
											<el-button type="primary" link @click="examine(scope.row)">审核</el-button>
											<el-dropdown hide-on-click>
												<el-button type="primary" link style="margin-left: 12px">
													更多
													<el-icon class="el-icon--right">
														<arrow-down />
													</el-icon>
												</el-button>
												<template #dropdown>
													<el-dropdown-menu>
														<el-dropdown-item class="el-dropdown-link" @click="immede_Execute(scope.row)">立即执行</el-dropdown-item>
														<el-dropdown-item class="el-dropdown-link" @click="handleDel(scope.row.zhbh)">删除</el-dropdown-item>
													</el-dropdown-menu>
												</template>
											</el-dropdown>
										</div>
									</template>
								</el-table-column>
							</el-table>
							<el-pagination
								:current-page="state.page"
								:page-sizes="state.pageSizes"
								:page-size="state.limit"
								:total="state.total"
								layout="total, sizes, prev, pager, next, jumper"
								@size-change="sizeChangeHandle"
								@current-change="currentChangeHandle"
							>
							</el-pagination>
						</el-scrollbar>
					</el-card>
				</el-header>
			</el-container>
			<add-or-update ref="addOrUpdateRef" @refreshDataList="getDataList"></add-or-update>
		</div>

		<Examine ref="examineRef" @close="closeExamine"></Examine>
	</el-container>
	<!-- 弹窗, 新增 / 修改 -->
	<tree-add-or-update ref="treeAddOrUpdateRef" @refreshDataList="getTreeList"></tree-add-or-update>
</template>

<script setup lang="ts">
import { nextTick, onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus/es'
import { Delete, Edit, Search, Plus, CircleClose, Refresh } from '@element-plus/icons-vue'
import TreeAddOrUpdate from './tree-add-or-update.vue'
import AddOrUpdate from './form.vue'
import Examine from './examine.vue'

import { getTreeSelectorByAuth, delTreeNode, combinationDelete, combinationExecute } from '@/api/labels-mana/index'

import { useCrud } from '@/hooks'
import { IHooksOptions } from '@/hooks/interface'

interface Tree {
	id: number
	label: string
	path: string
	parentPath: string
	projectId: number
	orderNo: number
	children?: Tree[]
}

const state: IHooksOptions = reactive({
	createdIsNeed: false,
	projectId: '',
	path: '',
	fileCategoryId: '',
	dataListUrl: '/data-labels/labelcombination/page',
	queryForm: {
		bqmc: '',
		fxdj: '',
		bqdx: '',
		shbz: '',
		sflk: '',
		bqdjid: ''
	}
})

const categoryData = ref<Tree[]>([])
const treeId = ref()
const treeRef = ref()

const formatName = (name: any) => {
	return name.substring(0, 10)
}

/* 初始化数据 */
onMounted(() => {
	getTreeList()
})

const getTreeList = () => {
	getTreeSelectorByAuth().then(res => {
		categoryData.value = listToTree(res.data)
		if (categoryData.value.length) {
			treeId.value = categoryData.value[0].id

			nextTick(() => {
				treeRef.value!.setCurrentKey(treeId.value)
				state.queryForm.bqdjid = treeId.value
				getDataList()
			})
		}
	})
}

const listToTree = data => {
	// * 先生成parent建立父子关系
	const obj = {}
	data.forEach(item => {
		obj[item.id] = item
	})
	const parentList = []
	data.forEach(item => {
		const parent = obj[item.sjbqid]
		if (parent) {
			// * 当前项有父节点
			parent.children = parent.children || []
			parent.children.push(item)
		} else {
			// * 当前项没有父节点 -> 顶层
			parentList.push(item)
		}
	})
	return parentList
}

// 树选中
const nodeClick = data => {
	treeId.value = data.id
	state.queryForm.bqdjid = data.id
	getDataList()
}

const treeAddOrUpdateRef = ref()
/* 添加根节点 */
const appendRoot = () => {
	treeAddOrUpdateRef.value.init(null, 0, '0')
}
//添加
const append = data => {
	treeAddOrUpdateRef.value.init(null, data.id, data.bqdj)
}
//编辑
const edit = (node, data) => {
	treeAddOrUpdateRef.value.init(data.id, data.sjbqid, data.bqdj, data.bqdjmc)
}
//移除
const remove = (node, data) => {
	ElMessageBox.confirm('确定进行删除操作?', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	}).then(() => {
		delTreeNode({ id: data.id }).then(() => {
			ElMessage.success('删除成功')
			getTreeList()
		})
	})
}

const handleActionSql = data => {
	console.log(data)
	if (data.shbz != 1) {
		ElMessage.error('请先审核通过后再执行！')
		return
	}

	try {
	} catch (e) {}
}

const immede_Execute = data => {
	console.log(data)
	if (data.shbz != 1) {
		ElMessage.error('请先审核通过后再执行！')
		return
	}

	combinationExecute({ zhbh: data.zhbh }).then(res => {
		if (res.data.bz == 1) {
			ElMessage.success('执行成功')
		} else {
			ElMessage.error(res.data.message)
		}
	})
}

const closeExamine = () => {
	getDataList()
}

const handleDel = bqid => {
	ElMessageBox.confirm('确定要删除此标签吗?', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	}).then(() => {
		combinationDelete({ zhbh: bqid }).then(() => {
			ElMessage.success('删除成功')
			getDataList()
		})
	})
}

// ------------------
const addOrUpdateRef = ref()
const addOrUpdateHandle = data => {
	addOrUpdateRef.value.init(data, treeId.value)
}

const examineRef = ref()
const examine = data => {
	examineRef.value.init(data)
}

const refresh = () => {
	state.queryForm = {
		bqmc: '',
		fxdj: '',
		bqdx: '',
		shbz: '',
		sflk: '',
		bqdjid: treeId.value
	}
	state.page = 1
	state.limit = 10
	getDataList()
}
const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteBatchHandle, downloadHandle } = useCrud(state)
</script>

<style>
.el-tree {
	display: inline-block;
	min-width: 100%;
}
.el-tree-node__content {
	height: 35px;
}
.dataFile-tree-node {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 16px;
	padding-right: 8px;
}
.el-dropdown-link {
	cursor: pointer;
	color: var(--el-color-primary);
	display: flex;
	align-items: center;
}
.accessDivClass {
	display: flex;
	flex-direction: row;
	position: relative;
}

.accessDivClass .el-overlay {
	height: 100%;
	position: absolute !important;
	overflow: hidden;
}
</style>
